<template>
  <div class="tag-box">
    <div
      v-if="contextmenuFlag"
      v-clickoutside="handleClose"
      class="tag-contentmenu"
      :style="{ left: contentmenuX + 'px', top: contentmenuY + 'px' }"
    >
      <div v-show="checkFirst" class="contentmenu-item" @click="closeCurrent">
        {{ $t("tag.closeCurrent") }}
      </div>
      <div class="contentmenu-item" @click="closeOthers">
        {{ $t("tag.closeOther") }}
      </div>
      <div class="contentmenu-item" @click="closeAll">
        {{ $t("tag.closeAll") }}
      </div>
    </div>
    <el-tabs
      v-model="activeMenu"
      type="card"
      @contextmenu.native="handleContextmenu"
      @tab-click="openTag"
    >
      <el-tab-pane :key="item.value" v-for="item in tagList" :name="item.value">
        <span slot="label"
          >{{ item.label }}
          <template v-if="item.value != $website.firstPage.value">
            <i
              v-if="checkIsCollect(item) === true"
              class="pd-lf-4 el-icon-star-on"
              @click.stop="colloectDb(item, 'off')"
            ></i>
            <i
              v-if="checkIsCollect(item) === false"
              class="pd-lf-4 el-icon-star-off"
              @click.stop="colloectDb(item, 'on')"
            ></i>
            <i class="el-icon-close" @click.stop="menuTag(item.value)"></i>
          </template>
        </span>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Clickoutside from "element-ui/src/utils/clickoutside";
import { mapGetters } from "vuex";
import { findByProperty } from "@/utils/util";
import { debounce } from "lodash";
export default {
  name: "TagBox",
  directives: { Clickoutside },
  data: () => ({
    contentmenuX: 0,
    contentmenuY: 0,
    contextmenuFlag: false,
    activeMenu: "",
    clickMenu: "",
  }),
  computed: {
    ...mapGetters(["tagList", "tag", "allMenu", "collectMenus"]),
    tagLen() {
      return this.tagList.length || 0;
    },
    checkFirst() {
      return !this.$website.firstPage.value.includes(this.clickMenu);
    },
  },
  watch: {
    tag() {
      this.setActive();
    },
    contextmenuFlag() {
      window.addEventListener("mousedown", this.watchContextmenu);
    },
  },
  methods: {
    checkIsCollect(item) {
      let idLists = this.collectMenus.map((item) => item.menuId);
      let targetId = findByProperty(this.allMenu, "path", item.value);
      if (!targetId) return "noId";
      if (!targetId.id) return "noId";
      return idLists.includes(targetId.id);
    },
    colloectDb: debounce(function (item, type) {
      this.collectionHandle(item, type);
    }, 300),
    async collectionHandle(item, type) {
      let obj = findByProperty(this.allMenu, "path", item.value);
      let menu = {
        id: obj?.id,
        name: item.label,
        path: item.value,
        source: item.icon,
      };
      if (!menu.id) return this.$message.error("获取菜单id异常!");
      if (type == "on") {
        this.$store.dispatch("SaveMenuInCollect", menu.id).then((res) => {
          if (res) this.$message.success(this.$t("msg.colSuccess"));
        });
      } else {
        this.$store.dispatch("RemoveMenuInCollect", menu.id).then((res) => {
          if (res) this.$message.success(this.$t("msg.removeSuccess"));
        });
      }
    },
    handleClose() {
      if (this.contextmenuFlag) {
        this.contextmenuFlag = false;
      }
    },
    menuTag(value) {
      let { tag, key } = this.findTag(value);
      this.$store.commit("DEL_TAG", tag);
      if (tag.value === this.tag.value) {
        tag = this.tagList[key === 0 ? key : key - 1];
        this.openTag(tag);
      }
    },
    findTag(value) {
      let tag, key;
      this.tagList.map((item, index) => {
        if (item.value === value) {
          tag = item;
          key = index;
        }
      });
      return { tag: tag, key: key };
    },
    openTag(item) {
      let tag, temSrc;
      if (item.name) {
        temSrc = item.name;
        tag = this.findTag(item.name).tag;
      } else {
        temSrc = item.value;
        tag = item;
      }
      // let obj = findByProperty(this.allMenu, "path", temSrc);
      // if (obj && obj.id) this.$store.dispatch("SaveMenuInClick", obj.id);
      this.$router.push({
        path: temSrc,
        query: tag.query,
      });
    },
    //激活当前选项
    setActive() {
      this.activeMenu = this.tag.value;
    },
    closeCurrent() {
      this.contextmenuFlag = false;
      this.menuTag(this.clickMenu);
    },
    closeOthers() {
      this.contextmenuFlag = false;
      let { tag } = this.findTag(this.clickMenu);
      this.$store.commit("DEL_TAG_OTHER", this.clickMenu);
      this.openTag(tag);
    },
    closeAll() {
      this.contextmenuFlag = false;
      let { tag } = this.findTag(this.$website.firstPage.value);
      this.$store.commit("DEL_ALL_TAG");
      this.openTag(tag);
    },
    handleContextmenu(event) {
      let target = event.target;
      let id = target.id ? target.id : target.parentElement.id;
      if (!id) return;
      this.clickMenu = id.split("-")[1];
      let flag = false;
      if (target.className.indexOf("el-tabs__item") > -1) flag = true;
      else if (target.parentNode.className.indexOf("el-tabs__item") > -1) {
        target = target.parentNode;
        flag = true;
      }
      if (flag) {
        event.preventDefault();
        event.stopPropagation();
        this.contentmenuX = event.clientX;
        this.contentmenuY = event.clientY;
        this.contextmenuFlag = true;
      }
    },
  },
  mounted() {
    this.setActive();
  },
};
</script>
